<template>
    <ContentBase>
        <div class="row">
            <div class="col-4">
                <UserProfileInfo @flower="flower" @unflower="unflower" :user="user"/>
                <UserProfileWriter v-if="is_me" @post_submit="post_submit"/>
            </div>
            <div class="col-8">
                <UserProfilePost :user="user" :posts="posts" @post_delete="post_delete" />
            </div>
        </div>

    </ContentBase>
</template>

<script>
    import ContentBase from '@/components/contentBase.vue';
    import UserProfileInfo from '@/components/UserProfileInfo.vue';
    import UserProfilePost from '@/components/UserProfilePost.vue';
    import UserProfileWriter from '@/components/UserProfileWrite.vue';
    import { reactive } from 'vue';
    import { useRoute } from 'vue-router';
    import $ from 'jquery';
    import { useStore } from 'vuex';
    import { computed } from 'vue';

    export default {
        name:"UserProfile",
        components:{
            ContentBase,
            UserProfileInfo,
            UserProfilePost,
            UserProfileWriter,
        },
        setup(){
            const store=useStore();    
            const route=useRoute();
            const userId=parseInt(route.params.userId);
            console.log(userId);

            const user=reactive({});
            const posts=reactive({});

            $.ajax({
                url:"https://app165.acapp.acwing.com.cn/myspace/getinfo/",
                type:"GET",
                data:{
                    user_id:userId,
                },
                headers:{
                    'Authorization':"Bearer "+store.state.user.access,
                },
                success(resp){
                    // console.log(resp);
                    user.id=resp.id;
                    user.username=resp.username;
                    user.photo=resp.photo;
                    user.followerCount=resp.followerCount;
                    user.is_followed=resp.is_followed;
                }
            });

            $.ajax({
                url:"https://app165.acapp.acwing.com.cn/myspace/post/",
                type:"GET",
                data:{
                    user_id:userId,
                },
                headers:{
                    'Authorization':"Bearer "+store.state.user.access,
                },
                success(resp){
                    posts.count=resp.length;
                    posts.posts=resp;
                }               

            });

            const flower=() =>{
                if(user.is_followed) return ;
                user.followerCount++;
                user.is_followed=true;
            };
            const unflower=() =>{
                if(!user.is_followed) return;
                user.is_followed=false;
                user.followerCount--;
            };
            const post_submit=(content)=>{
                posts.count++;
                posts.posts.unshift({
                    id:posts.count,
                    userId:1,
                    content:content,
                });
            }

            const post_delete=(post_id) => {
                posts.posts=posts.posts.filter(post =>post.id !== post_id);
                posts.count=posts.posts.length;
            }

            const is_me=computed(() => userId === store.state.user.id);
            return {user,flower,unflower,posts,post_submit,is_me,post_delete};
        }
    }
</script>

<style scoped>

</style>